<template>
  <div class="app-container ">
    <div class="table-container flex-main">
      <div class="table-container-header">
        <user-list-selector icon="el-icon-plus" text="添加人员" style="margin-right: 10px;" @selectUser="handleAddUser" />
        <el-button type="danger" icon="el-icon-delete" plain @click="handleRemoveUser">移除人员</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="userList"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @selection-change="handleSelectionChange">
        <el-table-column :selectable="selectable" type="selection" width="50" align="center" />
        <el-table-column :show-overflow-tooltip="true" label="头像" prop="avatar" width="70" align="center">
          <template slot-scope="scope">
            <img :src="common.getFileView(scope.row.avatar)" class="common-round-image-32" data-default="avatar" @error="handleImageError">
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="真实姓名" prop="realName" width="100" align="center" />
        <el-table-column label="性别" prop="gender" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.gender==1 ?'男': scope.row.gender==2 ? '女' : '保密' }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="手机号" prop="mobile" width="110" align="center" />
        <el-table-column prop="gmtCreated" width="150" sortable label="加入时间">
          <template slot-scope="scope">{{ scope.row.gmtCreated | formatDate }}</template>
        </el-table-column>
        <el-table-column label="拥有角色" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.roles" :key="item.id" effect="plain" style="margin-right:5px">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="userTotal>0" :total="userTotal" :page.sync="listUserQuery.page" :limit.sync="listUserQuery.limit" @pagination="fetchRoleUser" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    selectedRole: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      currentUserInfo: this.$store.getters.userInfo,
      userList: [],
      userTotal: 0,
      listUserQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: this.common.SORT_DEFAULT
      },
      multipleSelectionRecords: [],
      currentSelectedOrg: {}
    }
  },
  watch: {
    selectedRole: function(val) {
      this.fetchRoleUser()
    }
  },
  created() {
    this.fetchRoleUser()
  },
  methods: {
    selectable(row) {
      if (row.id !== this.currentUserInfo.id) {
        return true
      } else {
        return false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    async fetchRoleUser() {
      if (!this.selectedRole.id) {
        return
      }
      this.listUserQuery = {
        ...this.listUserQuery,
        roleId: this.selectedRole.id
      }
      const response = await this.$store.dispatch('pageUserByRoleId', this.listUserQuery)
      this.userList = response.records
      this.userTotal = response.total
    },
    handleAddUser(user) {
      this.$store.dispatch('userRoleSave', {
        roleId: this.listUserQuery.roleId,
        userIdList: [user.id]
      }).then(response => {
        this.$modal.msgSuccess('人员添加成功')
        this.fetchRoleUser()
      }).catch(() => { })
    },
    handleRemoveUser() {
      if (this.multipleSelectionRecords.length === 0) {
        this.$modal.msgWarning('请选择要移除人员记录')
        return
      }
      const ids = []
      this.multipleSelectionRecords.forEach((v, i) => {
        ids.push(v.id)
      })
      console.log(ids)
      this.$confirm('此操作将永久移除记录, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('userRoleRemove', {
          roleId: this.listUserQuery.roleId,
          userIdList: ids
        }).then(response => {
          this.$modal.msgSuccess('人员移除成功')
          this.fetchRoleUser()
        }).catch(() => { })
      }).catch(() => { })
    }
  }
}
</script>
<style>
</style>
